<template>
	<div>
		<ul class="grid-9">
			<li class="col-sm-3" v-for="(item, index) in channels" :key="index">
				<router-link :to="'/channel?id=' + item.id">
					<el-badge :value="item.badge" class="item">
					  <i :class="item.icon"></i>
					</el-badge>
					<div class="title">{{item.name}}</div>
				</router-link>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name: 'channel-grid',
		data() {
			return {
				channels: []
			}
		},
		mounted() {
			this.$api.channel.query().then(data => {
				console.debug("channels", data);
				this.channels = data;
			});
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	
	.grid-9 {
	    text-align: center;
	    padding: 0;
	}

	li {
		display: inline-block;
		margin: 0;
		padding: 15px 15px;
		vertical-align: top;
		border-bottom: 1px solid #eee;
		color: #797979;
	}

	li:nth-child(1),
	li:nth-child(2),
	li:nth-child(3) {
		border-top: 1px solid #eee;
	}

	li:nth-child(1n) {
		border-left: 1px solid #eee;
	}

	li:nth-child(3n) {
		border-right: 1px solid #eee;
	}

	li i.icon {
		font-size: 2.4em;
	}

	li div.title {
		font-size: 12px;
		line-height: 15px;
		display: block;
		width: 100%;
		height: 15px;
		margin-top: 10px;
		text-overflow: ellipsis;
		color: #333 !important;
	}

</style>
